<template>
	<view class="recommend">
		<view class="section_title">
			<text class="title">{{ title }}</text>
		</view>
		<view class="tuijian_item" v-for="(item, index) in list" :key="index" @click="$emit('detail', item)">
			<view class="image-wrapper">
				<image :src="item.coverUrl" mode="aspectFill" />
			</view>
			<view class="tuijian_info">
				<view class="tuijian_name">{{ item.name }}</view>
				<view class="tuijian_desc u-line-2">{{ item.description }}</view>
				<view class="tuijian_view">
					<u-icon name="play-right-fill" size="12" />
					{{ formatViewCount(item.viewCount) }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { formatViewCount } from '../utils/format.js';

export default {
	props: {
		title: {
			type: String,
			required: true
		},
		list: {
			type: Array,
			required: true
		}
	},

	methods: {
		formatViewCount
	}
};
</script>
<style lang="scss">
.recommend {
	margin-top: 20rpx;
	background: #fff;
	padding: 20rpx;

	.tuijian_item {
		display: flex;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f5f5f5;

		&:last-child {
			border-bottom: none;
		}

		.image-wrapper {
			width: 200rpx;
			height: 200rpx;
			margin-right: 20rpx;
			flex-shrink: 0;

			image {
				width: 100%;
				height: 100%;
				border-radius: 12rpx;
			}
		}

		.tuijian_info {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: 200rpx;
			overflow: hidden;

			.tuijian_name {
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				text-overflow: ellipsis;
				line-height: 1.4;
				max-height: 2.8em;
			}

			.tuijian_desc {
				display: inline-block;
				font-size: 24rpx;
				color: #999;
				line-height: 1.4;
				margin: 8rpx 0;
				width: fit-content;
				max-width: 90%;
				background-color: #f5f5f5;
				padding: 8rpx 10rpx;
				border-radius: 10rpx;
				// white-space: nowrap;
				// overflow: hidden;
				// text-overflow: ellipsis;
			}

			.tuijian_view {
				font-size: 24rpx;
				color: #999;
				display: flex;
				align-items: center;
				gap: 10rpx;
				.u-icon {
					margin-right: 4rpx;
				}
			}
		}
	}
}
</style>
